﻿<div class="easyui-layout" id="Layout_on_gpon">
    <div id="pannel_list_cau_truc_dn_find_site" data-options="region:'west', collapsible:false" title="Site Viễn Thông" style="width: 300px; padding: 10px">
        
        <input value="" id="donvi_find_ontgpon" style="width:270px; height:27px" />

         <div id="TreeGird_dau_noi_tb_ont_gpon"></div>

    </div>
    <div id="pannel_list_ont_gpon" data-options="region:'center'" style="padding:5px; position:relative" title="Danh sách ONT - GPON">
        <div id="listTbaleOnTGPON"></div>
    </div>
</div>


<script type="text/javascript">

    var madonviCurrently_onttb = "";
    var matoqlCurrently_onttb = "";
    var lapTbOntGponId_MAIN = "";

    $(document).ready(function () {

        $("#Layout_on_gpon").css('width', $(window).width() - 5);
        $("#Layout_on_gpon").height($(window).height() - 100);
        $('#listTbaleOnTGPON').height($(window).height() - 180);
        $('#listTbaleOnTGPON').width($("#pannel_list_ont_gpon").width() - 315);
        
        $("#donvi_find_ontgpon").combotree({
            url: _nameSubDomain + "/Donvi_ToQL/Get_DonVi_To_OnJson_NotFindType_AndSetParent",
            idField: "id",
            treeField: "text",
            onSelect: function (row) {


                $("#TreeGird_dau_noi_tb_ont_gpon").treegrid('load', { toql: row.id, donviql: row.Idparent });

                //maiTyComGirdCurrntly = row.type;

                if (row.type == "dv") {
                    madonviCurrently_onttb = row.id; matoqlCurrently_onttb = "";
                }
                else if (row.type == "toql") {
                    madonviCurrently_onttb = row.Idparent; matoqlCurrently_onttb = row.id;
                }
                else {
                    madonviCurrently_onttb = row.Idparent_parent; matoqlCurrently_onttb = row.Idparent;
                }
                

            },
            onLoadSuccess: function (row) {
                // $("#list_don_vi_phan_quyen_thong_bao").combotree('setValue', 1);
            }
        });

        $("#TreeGird_dau_noi_tb_ont_gpon").treegrid({

            url: _nameSubDomain + "/ONTGpon/listJsonIntoCateTree?toql=&donviql=",
            idField: "id",
            treeField: "vntpSite",
            lines: true,
            animate: true,
            collapsible: true,
            fitColumns: true,
            width: $("#pannel_list_cau_truc_dn_find_site").width() - 30,
            height: $(window).height() - 200,
            columns: [[
                { field: 'id', resizable: false, hidden: true },
                { field: 'vntpSite', resizable: false, title: 'Thiết bị', width: 110 }
            ]],
            //onContextMenu: onContextMenu_LOAISITE,
            onSelect: function (row) {

                $("#pannel_list_ont_gpon").mask("");

                setTimeout(function () {

                    lapTbOntGponId_MAIN = row.ThietbiId;

                    $('#listTbaleOnTGPON').jtable('load', { TbId: row.ThietbiId });

                    $("#pannel_list_ont_gpon").unmask();


                }, 300);

            },
        });



        $('#listTbaleOnTGPON').jtable({

            title: 'DS LẮP THUÊ BAO GPON',
            openChildAsAccordion: true,
            //paging: true, //Enable paging
            //pageSize: 16,
            actions: {
                listAction: _nameSubDomain + '/ONTGpon/ListONTByTbId?TbId=' + 0,
                //deleteAction: _nameSubDomain + '/TThietbi/DeleteLTB'

            },
            //toolbar: {
            //    hoverAnimation: true, //Enable/disable small animation on mouse hover to a toolbar item.
            //    hoverAnimationDuration: 60, //Duration of the hover animation.
            //    hoverAnimationEasing: undefined, //Easing of the hover animation. Uses jQuery's default animation ('swing') if set to undefined.
            //    items: [
            //        {
            //            icon: _nameSubDomain + '/Content/images/add.png',
            //            text: 'Thêm mới thuê bao Gpon',
            //            click: function () {
            //                _openWinDowLapDatTB();
            //            }
            //        }
            //    ] //Array of your custom toolbar items.
            //},
            fields: {
                ONTID: {
                    key: true,
                    edit: false,
                    create: false,
                    //list:false,
                    width: '3%',
                    display: function (tbData) {
                        var $img_port = $('<img src="' + _nameSubDomain + '/Content/images/congviec-icon.png" style="cursor:pointer;" title="Thuê Bao GPON" />');
                        //Open child table when user clicks the image
                        $img_port.click(function () {
                            $('#listTbaleOnTGPON').jtable('openChildTable',
                                   $img_port.closest('tr'), //Parent row
                                   {
                                       title: 'DS THUÊ BAO GPON ',
                                       toolbar: {
                                           hoverAnimation: true, //Enable/disable small animation on mouse hover to a toolbar item.
                                           hoverAnimationDuration: 60, //Duration of the hover animation.
                                           hoverAnimationEasing: undefined, //Easing of the hover animation. Uses jQuery's default animation ('swing') if set to undefined.
                                           items: [
                                               {
                                                   icon: _nameSubDomain + '/Content/images/add.png',
                                                   text: 'Thêm thuê bao GPON',
                                                   click: function () {
                                                       _openAddThueBaoGPOn(tbData.record.ONTID, tbData.record.THUTU);
                                                   }
                                               }
                                           ] //Array of your custom toolbar items.
                                       },
                                       actions: {
                                           listAction: _nameSubDomain + '/ONTGpon/ListTHUEBAOONTByTbId?ontId=' + tbData.record.ONTID,
                                           //deleteAction: _nameSubDomain + '/ONTGpon/_DeleteTHUEBAOONT'
                                           deleteAction: function (postData) {
                                               console.log("deleting from custom function...");
                                               return $.Deferred(function ($dfd) {

                                                   $(".pannel_list_ont_gpon").mask("Dữ liệu đang được xóa");

                                                   $.ajax({
                                                       url: _nameSubDomain + '/ONTGpon/_DeleteTHUEBAOONT',
                                                       type: 'POST',
                                                       dataType: 'json',
                                                       data: postData,
                                                       success: function (data) {

                                                           $dfd.resolve(data);
                                                           setTimeout(function () { $(".pannel_list_ont_gpon").unmask(); }, 600);

                                                       },
                                                       error: function () {
                                                           $dfd.reject();
                                                       }
                                                   });
                                               });
                                           },
                                       },
                                       fields: {
                                           ID: {
                                               key: true,
                                               //create: false,
                                               //edit: false,
                                               list: false,
                                               //title: 'Mã MVT',
                                               //width: '20%'
                                           },
                                           THUEBAO_ID: {
                                               title: 'Thuê Bao',
                                               width: '30%',
                                               display: function (data) {
                                                   if (data.record.THUEBAO_ID == null) return "";
                                                   else return GetThueBaoCssOntById(data.record.THUEBAO_ID).TEN_TB;
                                               }
                                           },
                                           SITE_ID: {
                                               title: 'Vnpt Site',
                                               width: '30%',
                                               display: function (data) 
                                               {
                                                   if (data.record.SITE_ID == null) return "";
                                                   else return Get_vnpt_site_ById(data.record.SITE_ID).TEN;
                                               }
                                           },
                                           GHI_CHU: {
                                               title: 'Ghi Chú',
                                               width: '20%'
                                           },
                                           UPDATE: {
                                               display: function (data) {
                                                   return '<button title="Edit Record" onclick="return UpdateThueBaoGPOn(' + tbData.record.ONTID + ',' + tbData.record.THUTU + ',' + data.record.ID + ')" class="jtable-command-button jtable-edit-command-button"><span></span></button>';
                                               },
                                               create: false,
                                               edit: false,
                                               width: '10%'
                                           },

                                       }
                                   }, function (data) { //opened handler
                                       data.childTable.jtable('load');
                                   });
                        });
                        //Return image to show on the person row
                        return $img_port;
                    }
                    
                },
                THUTU: {
                    title: 'Thứ tự',
                    width: '20%'
                },
                ONU_ID: {
                    title: 'ONT Id',
                    width: '20%'
                },
                VISA: {
                    title: 'Visa',
                    width: '10%'
                },
                SERIAL: {
                    title: 'Serial',
                    width: '10%'
                    
                },
                ACCOUNT: {
                    title: 'Account',
                    width: '10%'
                },
                THIETBI_ONT: {
                    title: 'Thiết bị ONT',
                    width: '20%'
                },
                TRANGTHAI: {
                    title: 'Trạng thái',
                    width: '10%',
                    display: function (data) {
                        return getTrangthaibyId(data.record.TRANGTHAI).TRANGTHAI1;
                    }
                },
                GHI_CHU: {
                    title: 'Ghi chú',
                    width: '20%'
                },
                UPDATE: {
                    display: function (data) {
                        return '<button title="Edit Record" onclick="return _Update_ONT_GPON(' + data.record.ONTID + ')" class="jtable-command-button jtable-edit-command-button"><span></span></button>';
                    },
                    create: false,
                    edit: false,
                    width: '10%'
                },

            },
            //Initialize validation logic when a form is created
            formCreated: function (event, data) {
                //data.form.find('input[name="TEN"]').addClass('validate[required]');
                data.form.validationEngine();
            },

        });

        $('#listTbaleOnTGPON').jtable('load');
        

    });

    function onContextMenu_MVT(e, row) {
        e.preventDefault();
        $(this).treegrid('select', row.id);
        //$('#ContextMenu_mvt_loaisite').menu('show', {
        //    left: e.pageX,
        //    top: e.pageY
        //});
    }

    

    

    function _openAddThueBaoGPOn(id,thutu) {
        loadwindowOnContent(_nameSubDomain + "/ONTGpon/AddThuBaoONTGPOn?ONTID=" + id + "&thutu=" + thutu + "&donvi=" + madonviCurrently_onttb + "&toql=" + matoqlCurrently_onttb, "window_addupdate_ontGPON", "Thêm Thuê Bao GPON " + name, 600, 340);
    }

    function UpdateThueBaoGPOn(id, thutu, IdTB) {

        loadwindowOnContent(_nameSubDomain + "/ONTGpon/AddThuBaoONTGPOn?ONTID=" + id + "&thutu=" + thutu + "&TbId=" + IdTB + "&donvi=" + madonviCurrently_onttb + "&toql=" + matoqlCurrently_onttb, "window_addupdate_ontGPON", "Thêm Thuê Bao GPON " + name, 600, 340);

    }

    function _Update_ONT_GPON(id) {

        loadwindowOnContent(_nameSubDomain + "/ONTGpon/UpdateONTGPON?ONTID=" + id , "window_addupdate_ontGPON_MAIN", "Cập nhật ONT GPON " + name, 700, 400);

    }


</script>